import {Component} from 'react'
//外部创建的数据
let citys=[
    {"cityId":1,name:"成都市"}, 
    {"cityId":2,name:"南充市"}, 
    {"cityId":3,name:"达州市"}, 
    {"cityId":4,name:"自贡市"}, 
    {"cityId":5,name:"绵阳市"},    
  ]

let genders = [
    {id:1,name:"男",value:"M"},
    {id:2,name:"女",value:"F"}
]
//爱好的数据
let hobbyList=[
    {id:1,name:"吃饭",value:'eat'},
    {id:2,name:"睡觉",value:'sleep'},
    {id:3,name:"打豆豆",value:'fight'},
    {id:4,name:"喝酒",value:'drink'},
    {id:5,name:"抽烟",value:'smoking'},
    {id:6,name:"烫头",value:'hotHead'}
]


class MyForm extends Component{
     
      constructor(props){
          super(props)
           this.state={
               userName:"",
               comment:"",
               mycity:3,
               gender:{id:2,name:"女",value:"F"},
               hobby:[
                {id:1,name:"吃饭",value:'eat'},
                {id:2,name:"睡觉",value:'sleep'},
                {id:3,name:"打豆豆",value:'fight'},
                
               ]
          } 
      }

      handleInputChange=(event)=>{
         let val =event.target.value;
         //console.log(val) 
          this.setState({
             userName:val
         })
      }
      handleTextArea=(event)=>{
        this.setState({
            comment:event.target.value
        })
      }

      hanleClick=()=>{
          console.log(this.state)
      }

      handleSelect=(e)=>{
        let val = parseInt(e.target.value);
        this.setState({
            mycity:val 
        }) 
      }
      //当单选框的值发生变化时 等到点击了谁
      //item 就是被点中的对象
      handleRadio=(item)=>{
          console.log(item);
          this.setState({
              gender:item
          })
      }
    //id是hobbyList中的每个爱好的id
      isChecked=(id)=>{
          //console.log("传入的id",id)
          //比组件的state中的每个值与传入的id 一次做比较
         return this.state.hobby.some((item)=>{ 
              //console.log(item.id,id,"****")   
             return item.id===id
            })
      }
       //处理复选框
       //checkd 表示复选框是否被选中
       //item 表示你点的个那个爱好对象
      hanleCheackBox=(checkd,item)=>{
        console.log(checkd,item)
        //先获得组件的状态
        let newList = this.state.hobby;
        //
        if(checkd){
            newList.push(item);
        }else{
              // [1,2,3]  点1 取消 [2,3]
            newList = newList.filter(hobbyItem=>hobbyItem.id!==item.id) 
        }

        //修改状态的值
        this.setState({
            hobby:newList
        })
      }

    render(){
        return(
            <>
            <div>
                <label>
                 姓名：
                <input value={this.state.userName} onChange={this.handleInputChange} type='text'></input>
                </label>
            </div>
            <div>
            <label>
             评价：
             <textarea onChange={this.handleTextArea} value={this.state.comment }></textarea>
           </label>
            <button onClick={this.hanleClick} >点击获取值</button>   
        </div>
        <div>
            <label>
             所在城市:
            <select value={this.state.mycity} onChange={this.handleSelect}>
             {
              citys.map((item)=><option key={item.cityId} value={item.cityId}>{item.name}</option>)
             }
            </select>
           </label>
           <label>
               你选中了城市为：
               {
               /* {this.state.mycity} */
                  citys.filter((item)=>{
                      //console.log(item.cityId,this.state.mycity,"***")
                return  item.cityId===this.state.mycity})[0].name
               }
           </label>
        </div>
        <div>
            {
             genders.map((item)=>{
                return  <label key={item.id}>
                    <input  onChange={(e)=>{this.handleRadio(item)}} type='radio' name='gender' checked={this.state.gender.id===item.id} value={item.value}/>{item.name}
                     </label>
             }) 
            }
            <div>
            你选中：{this.state.gender.name}
            </div>
        </div>
        <div>
           
        </div>
        <div>
            <div>爱好:</div>
            {
              hobbyList.map((item)=>{
                return <label key={item.id}>
                 <input onChange={(e)=>{this.hanleCheackBox(e.target.checked,item)}} checked={this.isChecked(item.id)}  type='checkbox' name='hobby' value={item.value}/>{item.name}
                </label>
              }) 
            }
            <div>
                你的爱好：
                {
                this.state.hobby.map(item=>item.id+'--'+item.name+',')
                }
            </div>
        </div>


        <button onClick={this.hanleClick} >点击获取值</button>   

        </>
              )
    }

} 

export default MyForm 

